<template>
    <div>
        <head-page class="header" @refreshMenu="refreshMenu"></head-page>
        <div class="routers client_content">
            <!-- 主体部分左侧导航 -->
            <div class="asideLeft">
                <p class="list_client">
                    <img src="../../assets/images/home_image/customer_list.png" alt="" class="list_LeftImg">
                    <span class="text_list">客户列表</span>
                    <img src="../../assets/images/home_image/transfer_add.png" alt="" class="list_RightImg"
                         data-toggle="modal" data-target="#add_customer">
                    <!--增加客户-->
                    <this-new-list :dealer-id="userAdmin.id"
                                   @refreshMenu="refreshMenu"></this-new-list>
                </p>
                <ul class="list">
                    <li class="list_left admin-self" :class="{active: isActive === userAdmin.id}" @click="adminClick">
                        <button class="circular" type="button">我</button>
                        <a href="javascript:void(0)" class="user_admin">{{ userAdmin.userNickname }}</a>
                        <span class="user_admin_menu">{{ dealerInfoVos.totalElements }}</span>
                    </li>
                    <li class="list_left dropdown" :class="{active: isActive === dealer.userId}"
                        v-for="(dealer, index) in subordinateDealers">
                        <button class="circular" :style="{color: getRandomColor[index]}">{{
                            dealer.userName.substr(0,1) }}
                        </button>
                        <a href="javascript:void(0)" class="user_admin" @click="userEquip(dealer)">
                            {{ dealer.userName }}</a>
                        <span class="user_admin_menu">{{ dealer.equipNum }}</span>
                        <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown"
                           role="button" aria-haspopup="true" aria-expanded="true" @click="dropDownTrigger(dealer)">
                            <span class="icon-user-md icon-large">
                                <span class="glyphicon glyphicon-option-vertical sidebar-menu"></span>
                            </span>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="">
                            <li><a href="#" @click="editInfo"> 编辑信息</a></li>
                            <li>
                                <a href="#" data-toggle="modal" data-target="#delete_customer" @click="deleteUser">
                                    删除客户
                                </a>
                            </li>
                            <li>
                                <a href="#" data-toggle="modal" data-target="#reset_password" @click="resetPwd">
                                    重置密码
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 编辑信息弹窗  EditInformation-->
            <left-edit-information :user="toOperation" @refreshMenu="refreshMenu"></left-edit-information>
            <!--删除客户弹窗 DeleteCustomer -->
            <delete-customer :user="toOperation" @refreshMenu="refreshMenu"></delete-customer>
            <!--  重置密码弹窗  ResetPassword -->
            <reset-password :user="toOperation"></reset-password>
            <!-- 主体部分右侧表格区域 -->
            <div class="asideInfo">
                <div class="box">
                    <div class="top_nav">
                        <div class="top_btn_btn">
                            <input class="inputs" type="text" placeholder="设备号（IMEI）/客户名/账号" v-model="searchParam">
                            <div class="btn-group">
                                <button type="button" class="btn btn-default btn_ssb" @click="searchEquip">搜设备
                                </button>
                                <button type="button" class="btn btn-default btn_syh" @click="searchUser">搜用户
                                </button>
                            </div>
                            <img src="../../assets/images/home_image/search.png" alt="" class="top_nav_img">
                        </div>
                        <!-- 搜客户弹窗 -->
                        <search-equipment ref="searchEquip" :user-data="subordinateDealers" @editEquip="getEquipInfo"
                                          @refreshMenu="refreshMenu" @showUser="editInfo"></search-equipment>
                        <!-- 搜用户弹窗 -->
                        <search-users ref="searchUser" @showUser="editInfo"></search-users>
                        <div class="top_left">
                            <img src="../../assets/images/home_image/customer.png" alt="">
                            <span>辰阳技术有限公司</span></div>
                        <div class="top_right">
                            <div class='navBox'>
                                <ul>
                                    <li class="myId_id"><p>登录账号</p>
                                        <p>{{ userAdmin.userEmail }}</p></li>
                                    <li class="myNumber"><p>设备总量</p>
                                        <p>{{ dealerInfoVos.totalElements }}</p></li>
                                    <li class="mySalesVolume"><p>设备销量</p>
                                        <p>{{ userAdmin.saleNum }}</p></li>
                                    <li class="myContacts"><p>联系人</p>
                                        <p>{{ userAdmin.linkman }}</p></li>
                                    <li class="myTelephone"><p>联系电话</p>
                                        <p>{{ userAdmin.phoneNumber }}</p></li>
                                    <li class="myAddress"><p>地址</p>
                                        <p>{{ userAdmin.dealerAddress }}</p></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="main">
                        <div class="main_nav">
                            <div class="button" @click="batchTransfer">批量转移</div>
                            <div class="button" data-toggle="modal" data-target="#batch_search">批量搜索</div>
                            <div class="button" data-toggle="modal" data-target="#add_equip">添加设备</div>
                            <div class="button">
                                <a :href="'https://car.so360.org/obd/excel/allEquipInfo/dealerId/' + userAdmin.id"
                                   target="_blank">导出EXCEL</a>
                            </div>
                        </div>
                        <!-- 批量转移 -->
                        <batch-transfer ref="batchTransfer" @refreshMenu="refreshMenu"></batch-transfer>
                        <!-- 批量搜索 -->
                        <batch-search @getData="batchSearch"></batch-search>
                        <!-- 添加设备 -->
                        <add-device :dealerId="userAdmin.id" @refreshMenu="refreshMenu"></add-device>
                        <table>
                            <colgroup>
                                <col width="50">
                                <col width="50">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="150">
                                <col width="17">
                            </colgroup>
                            <thead>
                            <tr id="menu_nav">
                                <th><input type="checkbox" @change="allCheck" v-model="isAllChecked"></th>
                                <th>序号</th>
                                <th>设备名</th>
                                <th>设备号(IMEI)</th>
                                <th>设备手机卡号</th>
                                <th>型号</th>
                                <th>车牌号</th>
                                <th>修改时间</th>
                                <th>设备转移</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                        </table>
                        <div class="table">
                            <table>
                                <colgroup>
                                    <col width="50">
                                    <col width="50">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                    <col width="150">
                                </colgroup>
                                <tbody v-if="equips.length > 0">
                                <tr v-for="(equip,index) in equips">
                                    <td><label><input type="checkbox" @change="singleClick(equip)"
                                                      v-model="equip.isChecked"/></label></td>
                                    <td>{{ index + 1 }}</td>
                                    <td>{{ equip.equipName }}</td>
                                    <td>{{ equip.imei }}</td>
                                    <td>{{ equip.phoneNum }}</td>
                                    <td>{{ equip.type }}</td>
                                    <td>{{ equip.license }}</td>
                                    <td>{{ equip.updateTime }}</td>
                                    <td class="dropdown">
                                        <span class="dropdown-toggle" data-toggle="dropdown"
                                              aria-haspopup="true" aria-expanded="true">转移</span>
                                        <ul class="dropdown-menu ">
                                            <li v-for="sub in subordinateDealers">
                                                <a href="javascript:void (0)" @click="transfer(sub, equip)">
                                                    {{ sub.userName }}
                                                </a>
                                            </li>
                                        </ul>
                                    </td>
                                    <td class="operation">
                                        <span data-toggle="modal" data-target="#equip_edit"
                                              @click="editEquip(equip)">编辑</span> |
                                        <span data-toggle="modal" data-target="#equip_delete"
                                              @click="deleteEquip(equip)">删除</span>
                                    </td>
                                </tr>
                                </tbody>
                                <tbody v-else>
                                <tr>
                                    <td>啥也没有</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- 编辑弹窗 -->
                        <edit ref="getListData" @refreshTable="refreshTable"></edit>
                        <!-- 删除弹窗 -->
                        <delete ref="deleteUserEquip" @refreshMenu="refreshMenu"></delete>
                        <div class="text-center customer-table-color">
                            <pagination ref="pagination" :total="total" :current-page='current' :display="display"
                                        @pageChange="pageChange"></pagination>
                        </div>
                        <!--底部页面显示数据条数-->
                        <div class="myButtonMenu">
                            <div>
                                <span>
                                    每页显示
                                    <label>
                                        <select name="pageSize" v-model="pageSize" @change="pageSizeChange">
                                            <option value="10">10</option>
                                            <option value="20">20</option>
                                            <option value="30">30</option>
                                            <option value="40">40</option>
                                            <option value="50">50</option>
                                            <option value="100">100</option>
                                        </select>
                                    </label>
                                    条
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    // 引入文件
    import headPage from '@/pages/header' // 引入头部文件
    import ThisNewList from '@/components/addCustomer/addCustomer' // 引入【新建客户  （ + ） 】弹窗文件、
    import SearchEquipment from '@/components/searchEquipment/searchEquipment' // 引入【搜设备】弹窗文件
    import SearchUsers from '@/components/searchUsers/searchUsers' // 引入【搜用户】弹窗文件
    // 底部分页插件引入
    import pagination from '@/components/pagination/pagination' // 引入【分页】文件
    // 主体部分批量弹窗
    import batchTransfer from '@/components/batchTransfer/batchTransfer' // 引入【批量转移】弹窗文件
    import BatchSearch from '@/components/batchSearch/batchSearch' // 引入【批量搜索】弹窗文件
    import AddDevice from '@/components/addDevice/addDevice' // 引入【批量添加】弹窗文件
    // 二级菜单弹窗
    import LeftEditInformation from '@/components/updateCustomer/updateCustomer' // 引入左侧导航 【 编辑信息】 弹窗文件
    import DeleteCustomer from '@/components/deleteCustomer/deleteCustomer' // 引入左侧导航 【删除客户】 弹窗文件
    import ResetPassword from '@/components/resetPassword/resetPassword' // 引入左侧导航 【 重置密码】 弹窗文件
    // 渲染表格的弹窗
    import Edit from '@/components/equipEdit/equipEdit' // 引入【编辑】弹窗文件
    import Delete from '@/components/deleteDevice/deleteDevice' // 引入【删除】弹窗文

    export default {
        // 注册组件
        components: {
            headPage,
            ThisNewList,
            batchTransfer,
            pagination,
            BatchSearch,
            AddDevice,
            SearchEquipment,
            SearchUsers,
            LeftEditInformation,
            DeleteCustomer,
            ResetPassword,
            Edit,
            Delete,
        },
        data () {
            return {
                isActive: 0,
                activeUser: {},
                isAllChecked: false,
                total: 0, // 记录总条数
                display: 10, // 每页显示条数
                current: 1, // 当前的页数
                userAdmin: {}, // 登陆用户信息
                dealerInfoVos: {}, //经销商信息
                chooseCustomer: {}, // 当前选中用户得到email
                currentCustomer: {}, // 临时保存需要的客户信息
                toOperation: {}, // 点击菜单传入的email
                searchParam: '',
                equips: [], // 当前用户设备列表
                subordinateDealers: [], // 子客户列表
                dealerId: '',
                pageSize: 10
            }
        },
        computed: {
            //获取随机首字母颜色
            getRandomColor () {
                let randomColor = []
                this.subordinateDealers.forEach(function () {
                    randomColor.push(
                        'rgb(' + Math.floor(Math.random() * 255) + ','
                        + Math.floor(Math.random() * 255) + ','
                        + Math.floor(Math.random() * 255) + ')'
                    )
                })
                return randomColor
            },
        },
        methods: {
            //获取首页数据
            getIndexData () {
                this.$ajax
                    .indexData
                    .adminIndexView()
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            let data = result.result
                            this.userAdmin = data.userInfoDTO
                            this.isActive = this.userAdmin.id
                            this.dealerInfoVos = data.dealerInfoVos
                            this.total = data.dealerInfoVos.totalElements
                            this.equips = this.dealerInfoVos.content
                            if (data.subordinateDealers) {
                                this.subordinateDealers = data.subordinateDealers
                            }
                            this.$store.commit('setAdmin', data.userInfoDTO)
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                        let timer = setTimeout(() => {
                            clearTimeout(timer)
                            $('#msgModal').modal('hide')
                            this.$router.push({path: '/login'})
                        }, 2000)
                    })
            },
            dropDownTrigger (user) {
                /**
                 * 客户列表点击显示菜单，保存当前点击客户email于chooseCustomer
                 */
                this.currentCustomer = user
            },
            /**
             * 编辑客户信息
             */
            editInfo (data) {
                let id = data.id ? data.id : this.currentCustomer.userId
                this.$ajax.userInfo
                    .getUserInfo(id)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.toOperation = result.result
                            $('#edit_user_info').modal('toggle')
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            /**
             * 删除客户
             */
            deleteUser () {
                this.toOperation = this.currentCustomer
            },
            //点击总代理（我）
            adminClick () {
                this.userEquip(this.userAdmin)
            },
            //左侧客户列表点击  获取对应的设备列表
            userEquip (data) {
                this.$store.commit('setSearchState', false)
                this.chooseCustomer = data
                this.isActive = data.id ? data.id : data.userId // 控制客户列表的选择状态
                this.activeUser = data      // 保存当前选中客户
                let params = {
                    dealerId: data.id ? data.id : data.userId,
                    pageSize: this.pageSize * 1
                }
                this.$ajax.equip
                    .getEquip(params)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            // 1.把设备显示到表格
                            this.equips = result.result.content
                            // 2.根据这个totalPages修改这个页码组件
                            this.total = result.result.totalElements
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            /**
             * 刷新左侧菜单
             */
            refreshMenu () {
                this.getIndexData()
            },
            /**
             * 刷新当前表格 ==> 编辑
             */
            refreshTable (data) {
                this.equips.forEach((v, k) => {
                    if (data.id === v.id) {
                        this.equips.splice(k, 1, data)
                    }
                })
            },
            /**
             * 重置密码
             */
            resetPwd () {
                this.toOperation = this.currentCustomer
            },
            /**
             * 全选
             */
            allCheck () {
                this.equips.map((v) => {
                    v.isChecked = this.isAllChecked
                })
            },
            /**
             * 单选
             */
            singleClick (equip) {
                this.isAllChecked = true
                this.equips.map((v) => {
                    this.isAllChecked = v.isChecked && this.isAllChecked
                })
            },
            /**
             * 批量转移
             */
            batchTransfer () {
                let equips = []
                this.equips.map((v, k) => {
                    if (v.isChecked) {
                        equips.push(v)
                    }
                })
                if (equips.length === 0) {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.equipEmpty})
                    return
                }
                $('#batch_transfer').modal('toggle')
                let data = {
                    dealers: this.subordinateDealers,
                    equips: equips,
                    admin: this.activeUser === {} ? this.userAdmin : this.activeUser
                }
                this.$refs.batchTransfer.getDealer(data)
            },
            // 批量搜索
            batchSearch (data) {
                this.equips = data
                this.total = data.length
                this.$store.commit('setSearchState', true)
            },
            // 表格转移
            transfer (user, equip) {
                if (user.userId === undefined || equip.id === undefined) {
                    this.$store.commit('showAlert', {error: '无效设备或无效客户'})
                    return
                }
                let data = {
                    id: equip.id,
                    newDealerId: user.userId
                }
                this.$ajax
                    .equip
                    .singleMove(data)
                    .then(res => {
                        let result = res.data
                        if (result.code === 200) {
                            this.refreshMenu()
                            this.$store.commit('showAlert', {success: this.$msgDictionary.operationSuc})
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            //搜设备弹窗设置
            searchEquip () {
                //请求不成功，提示弹窗
                if (this.searchParam === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.emptyInfo})
                    return
                }
                this.$ajax.equip
                    .queryEquip(this.searchParam)
                    .then((res) => {
                        let data = res.data
                        if (data.code === 200) {
                            if (data.result === undefined || data.result.length === 0) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.queryEmpty})
                                return
                            }
                            $('#search_equip').modal('toggle')
                            this.$refs.searchEquip.getData(data.result)
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            //搜客户弹窗设置
            searchUser () {
                //请求不成功，提示弹窗  与搜设备相同
                if (this.searchParam === '') {
                    this.$store.commit('showAlert', {error: this.$msgDictionary.emptyInfo})
                    return
                }
                //请求成功时
                let params = {
                    info: this.searchParam
                }
                this.$ajax.equip
                    .queryUser(params)
                    .then((res) => {
                        let data = res.data
                        if (data.code === 200) {
                            if (data.result === undefined || data.result.length === 0) {
                                this.$store.commit('showAlert', {error: this.$msgDictionary.queryEmpty})
                                return
                            }
                            $('#search_user').modal('toggle')
                            this.$refs.searchUser.getData(data.result)
                        } else if (data.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(function () {
                                clearTimeout(timer)
                                let time = setTimeout(function () {
                                    clearTimeout(time)
                                    this.$router.push('/login')
                                }, 1000)
                                $('#msgModal').modal('hide')
                            }, 1000)
                        } else {
                            this.$store.commit('showAlert', {error: data.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 请求后台得到每页数据
            getPageData (currentPage, pageSize) {
                if (currentPage === 0) {
                    currentPage = 1
                }
                /**
                 * 如果是批量搜索，则不调用后台
                 */
                if (this.$store.state.isBatchSearch) {
                    return
                }
                let data = {
                    dealerId: this.chooseCustomer.userId ? this.chooseCustomer.userId : this.$store.state.adminInfo.id,
                    pageNum: currentPage,
                    pageSize: pageSize
                }
                this.$ajax
                    .equip
                    .getEquip(data)
                    .then((res) => {
                        let result = res.data
                        if (result.code === 200) {
                            this.equips = result.result.content
                        } else if (result.code === 408) {
                            this.$store.commit('showAlert', {error: this.$msgDictionary.loginGetaway})
                            let timer = setTimeout(() => {
                                clearTimeout(timer)
                                $('#msgModal').modal('hide')
                                this.$router.push({path: '/login'})
                            }, 2000)
                        } else {
                            this.$store.commit('showAlert', {error: result.msg})
                        }
                    }, () => {
                        this.$store.commit('showAlert', {error: this.$msgDictionary.serviceException})
                    })
            },
            // 点击分页组件
            pageChange (currentPage) {
                this.getPageData(currentPage, this.pageSize)
            },
            //页面显示数据的条数
            pageSizeChange () {
                this.$refs.pagination.setCurrent(1)
                this.display = this.pageSize * 1
                this.getPageData(1, this.display)
            },
            //编辑  弹窗
            editEquip (data) {
                this.$refs.getListData.getInfo(data)
            },
            deleteEquip (data) {
                this.$refs.deleteUserEquip.getInfo(data)
            },
            //搜客户中，编辑弹窗设置
            getEquipInfo (data) {
                $('#search_equip').modal('hide')//关闭搜索的弹窗
                if (data.operate === 'edit') {
                    $('#equip_edit').modal('toggle')//打开编辑的弹窗
                    this.editEquip(data)//获取需要编辑的数据
                } else if (data.operate === 'delete') {
                    $('#equip_delete').modal('toggle')//打开编辑的弹窗
                    this.deleteEquip(data)//获取需要编辑的数据
                }
            }
        },
        mounted () {
            this.getIndexData()
        }
    }
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    table {
        width: 100%;
    }

    .asideLeft {
        width: 16%;
        height: 100%;
        background: #2f3a40;
    }

    .asideInfo {
        /*flex: 0.875;*/
        width: 84%;
    }

    .asideLeft .admin-self .circular {
        border-radius: 50%;
        color: #fff;
        border-color: rgb(23, 210, 156);
    }

    .asideLeft .admin-self .user_admin {
        width: 52%;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: bottom
    }

    .glyphicon {
        color: white;
    }

    .sidebar-menu {
        display: inline;
    }

    .routers {
        display: flex;
        height: 82vh;
    }

    tbody {
        overflow: hidden;
    }

    ul, li {
        list-style: none;
    }

    .navBox {
        width: 12.6rem;
        white-space: nowrap;
    }

    .navBox ul {
        height: 0.9rem;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
    }

    .navBox ul li {
        float: left;
        height: 0.9rem;
    }

    .navBox ul li p {
        height: 0.45rem;
        line-height: 0.45rem;
        text-align: center;
        color: rgb(153, 153, 153);
        font-size: 14px;
    }

    .navBox ul li p:last-child {
        color: rgb(102, 102, 102);
    }

    .user_admin {
        display: inline-block;
        width: 53%;
        font-size: 14px;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: bottom
    }

    .user_admin_menu {
        padding: 0 5px;
        color: rgb(153, 153, 153);
    }

    .myId_id {
        margin-left: 0.53rem;
    }

    .myNumber {
        margin-left: 0.9rem;

    }

    .mySalesVolume {
        margin-left: 0.9rem;

    }

    .myContacts {
        margin-left: 0.9rem;
    }

    .myTelephone {
        margin-left: 1rem;
    }

    .myAddress {
        margin-left: 0.6rem;
        width: 100px;
    }

    .list a {
        text-decoration: none;
    }

    .list .list_left {
        height: 0.54rem;
        border: 1px solid transparent;
        border-left: 0;
        border-right: 0;
        line-height: 0.54rem;
        white-space: nowrap;
    }

    .list .list_left .user_admin {
        padding-left: 10px;
    }

    #nav_top span {
        font-size: 0.18rem;
        padding-left: 0.05rem;
        margin-right: 0.05rem;
        padding-right: 0.05rem;
    }

    ul > li > a {
        color: white;
        text-decoration: none;
    }

    li span {
        color: white;

    }

    .list {
        position: relative;
        background: #263238;
        color: white;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        white-space: nowrap;
        padding-top: 0.4rem;
    }

    .list li:hover, .list li.active {
        background: #2f3a40;
        border-color: #1A1E20;
    }

    .list li:hover > a, .list li.active > a {
        color: #17D29C;
    }

    .list li.active .circular {
        color: rgb(23, 210, 156) !important;
    }

    .list_LeftImg {
        padding: 0 0.1rem 0 0.3rem;
    }

    .text_list {
        color: #fff;
        font-size: 16px;
        padding-top: 5px;
    }

    .list_RightImg {
        float: right;
        cursor: pointer;
        padding: 0.26rem 0.24rem;
    }

    .list_client {
        white-space: nowrap;
        height: 0.7rem;
        line-height: 0.7rem;
        position: relative;
    }

    .myButtonMenu {
        position: absolute;
        bottom: 0.5rem;
        margin-left: 0.2rem;
    }

    .myButtonMenu ul {
        width: 0.55rem;
    }

    .btn-default {
        width: 0.6rem;
    }

    #myButtonMenu ul li {
        width: 0.5rem;
    }

    .input-group input {
        border-radius: 5%;
    }

    table td {
        height: 0.4rem;
    }

    .btn-default {
        width: 0.6rem;
        height: 0.45rem;
    }

    #menu_nav {
        padding-left: 0.5rem;
        height: 0.4rem;
        background: rgb(23, 210, 156);
        color: rgb(255, 255, 255);
    }

    .box {
        clear: both;
        background: white;
        width: 100%;
        height: 7rem;
    }

    .dropdown-menu {
        right: 0;
        left: auto;
        top: 60%;
        background: #2F3A40;
        min-width: 100px;
        padding: 14px 0;
    }

    .dropdown-menu > li > a {
        padding: 3px 27px;
    }

    .dropdown-menu > li > a:hover {
        background: #2F3A40;
        color: rgb(23, 210, 156);
    }

    .table {
        height: 44vh;
    }

    .table .dropdown-menu {
        height: 210px;
        overflow: auto;
    }

    .top_nav {
        margin-top: 0;
        position: relative;
        float: left;
        width: 100%;
        height: 1.65rem;
        background: rgb(233, 246, 242);
        box-shadow: 0 5px 5px #DCE9E5 inset;
    }

    .top_btn_btn {
        position: absolute;
        padding-right: 0.05rem;
        left: 11.6rem;
        padding-top: 0.12rem;
    }

    .top_nav_img {
        position: absolute;
        left: 0.18rem;
        top: 0.19rem;
        width: 0.25rem;
        height: 0.25rem;
    }

    .inputs {
        width: 2.4rem;
        height: 0.4rem;
        background: white;
        margin-left: 0.1rem;
        border-radius: 0.05rem;
        padding-left: 0.5rem;
        font-size: 0.1rem;
        border: 0.01rem solid rgb(204, 204, 204);
    }

    .btn_ssb {
        width: 0.6rem;
        height: 0.4rem;
        font-size: 0.12rem;
    }

    .btn_syh {
        width: 0.6rem;
        height: 0.4rem;
        font-size: 0.12rem;
    }

    .top_left {
        color: rgb(23, 210, 156);
        position: absolute;
        margin-right: 0.03rem;
        height: 0.9rem;
        width: 2.16rem;
        background: rgb(255, 255, 255);
        margin-top: 0.6rem;
        line-height: 0.9rem;
        text-align: center;
    }

    .top_left span {
        padding-left: 0.1rem;
        padding-top: 0.1rem;
        font-size: 14px;
    }

    .top_right {
        position: absolute;
        height: 0.9rem;
        width: 13.7rem;
        margin-left: 2.3rem;
        background: rgb(255, 255, 255);
        margin-top: 0.6rem;
        text-align: left;
        color: black;
    }

    .main {
        color: rgb(102, 102, 102);
        border-color: rgb(23, 210, 156);
        margin-top: 2.2rem;
        background: white;
        text-align: left;
        clear: both;
        width: 100%;
    }

    .main_nav {
        height: 0.6rem;
        width: 15.1rem;
        line-height: 0.6rem;
        text-align: left;
    }

    .main_nav .button {
        display: inline-block;
        text-align: center;
        cursor: pointer;
    }

    .main_nav .button a {
        text-decoration: none;
        color: rgb(23, 210, 156);
    }

    .circular {
        outline: none;
        color: rgb(23, 210, 156);
        height: 0.4rem;
        width: 0.4rem;
        background: rgb(47, 58, 64);
        border: 0.01rem solid rgb(26, 30, 32);
        line-height: 0.4rem;
        border-radius: 0.3rem;
        margin-left: 0.2rem;
        font-size: 0.16rem;
        background-size: contain;
    }

    .button {
        outline: none;
        color: rgb(23, 210, 156);
        width: 1rem;
        background: white;
        border: 0.01rem solid rgb(23, 210, 156);
        line-height: 0.3rem;
        border-radius: 0.3rem;
        margin-left: 0.23rem;
        font-size: 0.14rem;
    }
</style>
